<template>
	<scroll-view class="scroll-list" scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="loadMore">
		<view class="card" v-for="(todo, index) of list" :key="todo.procInsId" @click="toHandle(todo)">
			<view class="card-header flex flex-center">
				<view class="card-header-title">{{ todo.procDefName }}</view>
				<view v-if="!todo.finishTime" class="card-header-tag">进行中</view>
				<view v-if="todo.finishTime" class="card-header-tag card-header-tag-completed">已完成</view>
			</view>
			<view class="card-body">
				<view>
					耗时：<text>{{ todo.duration }}</text>
				</view>
				<view class="flex flex-center">
					<view class="flex-1">
						发起时间：{{ todo.createTime }}
					</view>
					<view>
						<view class="btn-deatil"
							  v-if="!todo.finishTime"
							  @click.stop="handleCancel(todo,index)">取消申请</view>
					</view>
				</view>
				<view class="flex-1">
					结束时间：{{ todo.finishTime }}
				</view>
			</view>
		</view>
		<view class="m-t">
			<u-empty v-if="!list.length" src="/static/tduck/null.png" text="暂无发起" mode="list" />
			<view v-if="list.length < total" class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				query: {
					current: 1,
					size: 20,
				},
				loadStatus: 'loadmore',
				list: [],
				total: 0,
			};
		},
		created() {
			this.loadList()
			uni.$on('refreshData', (type) => {
				if (type === 0) {
					this.list = []
					this.loadList()
				}
			})
		},
		methods: {
			handleCancel(task, index) {
				const params = {
					instanceId: task.procInsId,
					formDataId: task.formDataId
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消该流程',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.workflow.cancelProcess(params).then(response => {
								that.$u.toast('取消成功');
								that.list.splice(index, 1)
							})
						} else if (res.cancel) {}
					}
				});
			},
			toHandle(task) {
				uni.navigateTo({
					url: `/pages/workflow/me/handle?instanceId=${task.procInsId}&deployId=${task.deployId}`
				});
			},
			loadMore() {
				if (this.list.length >= this.total || this.loadStatus === 'loading') {
					return;
				}
				this.loadStatus = "loading";
				this.query.current = this.query.current + 1;
				this.$nextTick(() => {
					this.loadList();
				})
			},
			loadList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.api.workflow.getMyProcess(this.query).then(res => {
					if (!res.records || res.records.length == 0 || this.list.length >= res.total) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.records);
					this.total = res.total;
					this.loadStatus = "loadmore";
					uni.hideLoading();
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.card-header-tag {
		font-size: 25.36rpx;
		color: #fff;
		padding: 7.25rpx 18.12rpx;
		margin-left: 27.17rpx;
		background-color: #F4935F;
		border-radius: 7.25rpx;
	}

	.card-header-tag-completed {
		background-color: #878787;
	}

	.card-body {
		color: #AAAAAA;
		font-size: 25.36rpx;
	}

	.btn-deatil {
		width: 144.93rpx;
		height: 50.72rpx;
		line-height: 50.72rpx;
		font-size: 25.36rpx;
		border: 1px solid #1BA6FC;
		text-align: center;
		border-radius: 9.06rpx;
		color: #1BA6FC;
	}
</style>
